import styled from 'styled-components'
import logoPic from '../../statics/logo.png'

export const HeaderWrapper = styled.div`
    position : relative ;
    height : 56px;
    border-bottom :1px solid #f0f0f0;
   
   
`

export const Logo = styled.a.attrs({
    href : '/'
})`
    
    position : absolute ;
    top :0;
    left : 0;
    display :block ; 
    width: 100px;
    height : 56px;
    background: url(${logoPic});
    background-size:contain;
`


export const Nav = styled.div`
    
    width:860px;
    height : 100%;
    margin : 0 auto ;
    padding-right:70px;
    box-sizing :border-box;
  
`

export const Navitem = styled.div`
    line-height : 56px;
    padding: 0 15px;
    font-size: 17px;
    color :#333;
    &.left {
       float:left;
    };
    &.right {
       float:right;
        color： #969696;
    };
    &.active {
        color : #ea6f5a;
    };

`
export const SearchWrapper = styled.div`
    position:relative;
    float : left;

    


    .iconfont{
       
        position:absolute;
        right : 5px ;
        bottom: 5px;
        width: 30px;
        line-height : 30px ;
        border-radius: 15px;
        text-align: center;

        &.focused{
            background :#777;
        }
    };
    

`

export const SearchInfo = styled.div`
    position : absolute;
    left:0;
    top:56px;
    width:240px;
    padding:0 20px;
    
    box-shadow: 0 0 8px rgba(0,0,0, .2);
`

export const SearchInfoTtile = styled.div`
   
   margin-top: 20px;
   margin-bottom: 15px;
   line-height :20px;
   font-size:14px;
   color:#969696
`

export const SearchInfoSwitch = styled.span`
    float: right;
    font-size: 13px;
`

export const SearchInfoItem = styled.a`
    display: block;
    float: left;
    line-height: 20px;
    padding:0 5px;
    margin-right: 10px;
    margin-bottom: 15px;
    font-size: 12px;
    border: 1px solid #ddd;
    color: #787878;
    border-radius: 3px;    
`



export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})`
    width:160px;
    height: 38px;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 19px;
    margin-left: 20px;
    margin-top: 9px;
    background: #eee;
    font-size: 14px;
    &::placeholder {
        color:  #999 ; 
    };
    &.focused{
        width: 200px;
        coclor : #777;
    }
    &.slide-enter{
        transition : all .2s ease-in
    }
    &.slide-enter-active{
        width :200px
    }
    &.slide-exit{
        transition : all .2s ease-out
    }

    
`

export const Addation = styled.div`
    position : absolute ;
    right : 0 ;
    top : 0 ;
    height:56px ;
`

export const Button = styled.div`
    float :right;
    line-height:38px;
    margin-right :20px;
    padding: 0 20px ;
    font-size:14px; 
    border-radius:19px;
    margin-top:9px;
    border: 1px solid #ec6149;
    &.reg {
        color: #ec6149;
    };
    &.write {
        color: #fff;
        background: #ec6149; 
    };
`